<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绑定Value</title>
</head>
<body>
<div id="example">
  <input type="checkbox" v-model="toggle" v-bind:trueValue="a" v-bind:falseValue="b">
  <span>{{toggle}}</span>
  <input type="radio" v-model="pick" v-bind:value="a">
  <span>{{pick}}</span>
  <select v-model="selected">
    <option v-bind:value="{number:123}">123</option>
  </select>
  <span>{{selected.number}}</span>
  <!-- 在change而不是在input事件中更新 -->
  <input type="text" v-model="msg" lazy number>
  <span>{{msg}}</span>
  <!-- 延迟debounce后更新数据-->
  <input type="text" v-model="txt" number debounce="3000">
  <span>{{txt}}</span>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
  var val = new Vue({
    el: '#example',
    data: {
      a: "hello",
      toggle: '',
      pick: '',
      selected: '',
      msg: 'lazy',
      txt: 'debounce'
    }
  });
</script>
</body>
</html>
